<style scoped>
ul, li {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    list-style: none;
    user-select: none;
}

ul {
    display: flex;
    row-gap: 0.25rem;
    flex-wrap: wrap;
    flex-direction: column;
}

li ul {
    position: relative;
    white-space: nowrap;
    margin-inline-start: 1rem;
    padding-inline-start: 1rem;
}
</style>

<template>
    <ul>
        <li v-for="item in list">
            <div class="py-1 box-border flex items-center border-0 border-b border-solid border-#e5e7eb">
                <div @click="itemClick(item, !item.select)" class="p-r-6 cursor-pointer box-border flex gap-col-2 items-center border-0 border-r border-solid border-#e5e7eb">
                    <NCheckbox :checked="item.select" size="large">{{ item.name }}</NCheckbox>
                </div>
                <div class="p-l-6">
                    <template v-for="permission in (item.permission || [])">
                        <div @click="itemClick(permission, !permission.select)" class="cursor-pointer box-border p-x-2 inline-flex gap-col-2 items-center">
                            <NCheckbox :checked="permission.select" size="large">{{ permission.name }}</NCheckbox>
                        </div>
                    </template>
                </div>
            </div>
            <children v-if="item.children" :list="item.children" :select="select" :collect="collect" />
        </li>
    </ul>
</template>

<script setup lang="ts">
import {Api} from '@/api/type'
import {NCheckbox} from 'naive-ui'

type Option = Api.System.RouteOption;

const {list, select, collect} = defineProps({
    list: {
        type: Array<Option>,
        required: true
    },
    select: {
        type: Map<string, boolean>,
        required: true
    },
    collect: {
        type: Map<string, Option[]>,
        required: true
    }
})

function itemClick(option: Option, state: boolean) {
    option.select = state
    select?.set(option.identity, state)

    collect.get(option.identity)?.forEach(item => {
        item.select = state
        select?.set(item.identity, state)
        // 判断如果还有子集
        collect.get(item.identity)?.forEach(child => {
            itemClick(child, state)
        })
    })
}
</script>
